<!--
Date: 2025-08-13
Copyright (c) 2025 Industrial Software Feature Database
-->
<template>
  <!-- 3D display area -->
  <div class="show-three-main" id="fullscreen-div">
    <Toolbar :showInfo="showInfo" v-if="modelInfo.url" :config="toolbarConfig" :selectedTool.sync="selectedTool" @on-click="buttonClick" />
    <div style="height: 100%; width: 100%">
      <div ref="container" class="common-three-class" :class="{ 'showInfo': showInfo }" />
      <!-- tool bar -->
      <div class="elementInfo" v-if="showInfo">
        <div class="location">
          <el-divider content-position="center">单元基本信息</el-divider>
          <div class="item">
            item_no：<span>{{ locationData[0]?.item_no }}</span>
          </div>
          <div class="item">
            item_type：<span>{{ locationData[0]?.item_type }}</span>
          </div>
          <div class="item">
            unit_normal：<span>{{ locationData[0]?.unit_normal }}</span>
          </div>
          <el-divider content-position="center" v-if="locationData[0]?.nodes?.length > 0">nodes</el-divider>
          <div v-for="item in locationData[0]?.nodes" :key="item">
            <div class="item">
              nid：<span>{{ item.nid }}</span>
            </div>
            <div class="item">
              xyz：<span>{{ item.xyz }}</span>
            </div>
          </div>
          <el-divider content-position="center">mid_ref</el-divider>
          <div class="item">
            mats1_ref：<span>{{ locationData[0]?.properties?.mid1_ref?.mats1_ref || locationData[0]?.properties?.mid_ref?.mats1_ref }}</span>
          </div>
          <div class="item">
            matt1_ref：<span>{{ locationData[0]?.properties?.mid1_ref?.matt1_ref || locationData[0]?.properties?.mid_ref?.matt1_ref }}</span>
          </div>
          <div class="item">
            _comment：<span>{{ locationData[0]?.properties?.mid1_ref?._comment || locationData[0]?.properties?.mid_ref?._comment }}</span>
          </div>
          <div class="item">
            mid：<span>{{ locationData[0]?.properties?.mid1_ref?.mid || locationData[0]?.properties?.mid_ref?.mid }}</span>
          </div>
          <div class="item">
            e：<span>{{ locationData[0]?.properties?.mid1_ref?.e || locationData[0]?.properties?.mid_ref?.e }}</span>
          </div>
          <div class="item">
            g：<span>{{ locationData[0]?.properties?.mid1_ref?.g || locationData[0]?.properties?.mid_ref?.g }}</span>
          </div>
          <div class="item">
            nu：<span>{{ locationData[0]?.properties?.mid1_ref?.nu || locationData[0]?.properties?.mid_ref?.nu }}</span>
          </div>
          <div class="item">
            rho：<span>{{ locationData[0]?.properties?.mid1_ref?.rho || locationData[0]?.properties?.mid_ref?.rho }}</span>
          </div>
          <div class="item">
            a：<span>{{ locationData[0]?.properties?.mid1_ref?.a || locationData[0]?.properties?.mid_ref?.a }}</span>
          </div>
          <div class="item">
            tref：<span>{{ locationData[0]?.properties?.mid1_ref?.tref || locationData[0]?.properties?.mid_ref?.tref }}</span>
          </div>
          <div class="item">
            ge：<span>{{ locationData[0]?.properties?.mid1_ref?.ge || locationData[0]?.properties?.mid_ref?.ge }}</span>
          </div>
          <div class="item">
            St：<span>{{ locationData[0]?.properties?.mid1_ref?.St || locationData[0]?.properties?.mid_ref?.St }}</span>
          </div>
          <div class="item">
            Sc：<span>{{ locationData[0]?.properties?.mid1_ref?.Sc || locationData[0]?.properties?.mid_ref?.Sc }}</span>
          </div>
          <div class="item">
            Ss：<span>{{ locationData[0]?.properties?.mid1_ref?.Ss || locationData[0]?.properties?.mid_ref?.Ss }}</span>
          </div>
          <div class="item">
            mcsid：<span>{{ locationData[0]?.properties?.mid1_ref?.mcsid || locationData[0]?.properties?.mid_ref?.mcsid }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Toolbar from './components/Toolbar.vue';
import ToolbarConfig from './config/toolbar.config.js';
import { createThree } from './api/three/three.context.js';
import './style/index.scss';

export default {
  name: 'ShowThree',
  components: {
    Toolbar
  },
  props: {
    // 模型信息，一般包含  url: 三维模型文件地址''  和  userDataUrl：用户自定义业务数据，如中心点信息、面-element对应信息等等
    modelInfo: {
      type: Object,
      default: () => {}
    },
    // 选中的单元element的id，即eids
    selectedElements: {
      type: Array,
      default: () => []
    },
    // 单元收缩比例
    shrink: {
      type: [Number, String],
      default: 0
    },
    showInfo: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    modelInfo: {
      handler() {
        this.loadGltf();
        this.loadJson();
      },
      deep: true
    },
    selectedElements: {
      handler() {
        console.log('selectedElements-watch');
        console.log(this.selectedElements);
        this.selection = this.selectedElements;
        this.threeObj.setSelection(this.selectedElements);
      }
    },
    shrink() {
      if (this.modelInfo.url) {
        this.threeObj.toolbarAction('shrink', this.shrink);
      }
    }
  },
  methods: {
    // 转换json文件
    loadJson() {
      if (this.modelInfo.userDataUrl) {
        fetch(this.modelInfo.userDataUrl)
          .then((response) => {
            if (!response.ok) {
              throw new Error('Network response was not ok ' + response.statusText);
            }
            return response.json(); // 将响应体转换为JSON
          })
          .then((data) => {
            this.jsonData = [...data?.item_xref];
          })
          .catch(() => {
            this.jsonData = [];
          });
      }
    },
    // 输出选中的单元
    outputElementSelection(selection) {
      this.selection = selection;
      this.$emit('on-select', selection);
      console.log(selection);
      // 查询单元的XYZ坐标信息
      this.locationData = this.jsonData.filter((el) => {
        return el.item_no == selection;
      });
    },
    // 装载模型
    loadGltf() {
      console.log('load');
      console.log(this.modelInfo);
      this.threeObj.clear();
      if (this.modelInfo.url) {
        this.threeObj
          .loadGltf(this.modelInfo)
          .then(() => {
            this.$emit('load-end');
            this.threeObj.toolbarAction('shrink', this.shrink);
          })
          .catch(() => {
            this.$emit('load-end');
          });
      }
    },
    reloadGltf() {
      this.threeObj
        .reloadGltf(this.modelInfo)
        .then(() => {
          this.$emit('load-end');
          if (this.modelInfo.url) {
            this.threeObj.toolbarAction('shrink', this.shrink);
          }
        })
        .catch(() => {
          this.$emit('load-end');
        });
    },
    fullScreenFn(elem) {
      if (!document.fullscreenElement) {
        elem.requestFullscreen().catch((err) => {
          console.error(err);
        });
      } else {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        }
      }
    },
    buttonClick(id) {
      if (id === 'fullScreen') {
        var div = document.getElementById('fullscreen-div');
        this.fullScreenFn(div);
      } else {
        this.threeObj.toolbarAction(id);
      }
    }
  },
  data() {
    return {
      toolbarConfig: ToolbarConfig.toolbar,
      selectedTool: 'default',
      selection: [], // 当前选中的单元
      jsonData: [],
      locationData: [], //坐标数据
      elementInfoData: {}
    };
  },
  mounted() {
    this.threeObj = createThree.getInstance(this.$refs.container, this.outputElementSelection);
    this.loadGltf();
    this.loadJson();
  },
  beforeDestroy() {
    this.threeObj.clear();
  }
};
</script>

<style lang="less" scoped>
.show-three-main {
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
  .showInfo {
    width: calc(100% - 200px);
  }
  .elementInfo {
    width: 200px;
    height: 100%;
    background: #fff;
    position: absolute;
    right: 0;
    top: 0;
    padding: 0 10px;
    font-size: 12px;
    overflow-y: auto;
    .location {
      .item {
        padding: 10px 10px;
        > span {
          color: #909399;
        }
      }
    }
  }
}
.common-three-class {
  width: 100%;
  height: 100%;
  position: relative;
}
//框选框样式
:deep(.selectBox) {
  border: 1px solid #55aaff;
  background-color: rgba(75, 160, 255, 0.3);
  position: fixed;
}
:deep(.el-divider__text) {
  font-size: 12px;
  font-weight: 600;
  padding: 0 5px;
}
</style>

